<template>
  <div>
    <Header :style="{background: '#fff', boxShadow: '0 2px 3px 2px rgba(0,0,0,.1)'}"
            id="head">
      <Menu mode="horizontal"
            active-name="1">
        <MenuItem name="1"
                  @click.native="chatShow">
        <Icon type="ios-paper" />
        消息
        </MenuItem>

        <Submenu name='4'
                 class="logout">
          <template slot="title">
            <!-- <Icon type="ios-person" /> -->
            <i class="iconfont icon-heiwushi adminLog"></i>

            {{ getStaff.nickname }}
          </template>

          <MenuItem name="4-1"
                    @click.native="showInfo">资料</MenuItem>
          <MenuItem name="4-2"
                    @click.native="logout">退出登录</MenuItem>

        </Submenu>

      </Menu>

    </Header>

    <Drawer title="我的资料"
            :closable="false"
            v-model="infoShow">
      <p>昵称：{{getStaff.nickname}} </p>
      <p>账号：{{getStaff.acc}} </p>
      <p>职位：{{getStaff.job_name}}</p>
      <p>注册时间：{{getStaff.create_time}} </p>

    </Drawer>

  </div>
</template>

<script>
import { logout } from 'server/admin_k.js'
import { mapGetters } from 'vuex'

export default {
  data() {
    return {
      // theme1: 'primary '
      infoShow:false
    }
  },
  methods: {
    logout() {
      this.$show
        .show1({
          title: '退出登录',
          content: '您确定要退出登录吗？',
          success: '已退出登录！'
        })
        .then(() => {
          logout().then(res => {
            this.$router.replace('/adminlogin')
          })
        })
        .catch(() => {})
    },
    chatShow() {
      this.$store.commit('frontChatShowing', {
        show: true
      })
    },
    showInfo() {
  
      this.infoShow = true
    }
  },
  components: {
    // FrontChat
  },
  computed: {
    ...mapGetters(['getStaff'])
  }
}
</script>

<style scoped>
#head .logout {
  float: right;
  display: flex;
  justify-content: center;
  align-items: center;
}
.adminLog {
  font-size: 30px;
  /* margin-top: 20px; */
  display: block;
  float: left;
}
</style>